<!DOCTYPE html>
<head>    
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    
        <script>
            L_NO_TOUCH = false;
            L_DISABLE_3D = false;
        </script>
    
    <style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
    <style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
    <script src="https://cdn.jsdelivr.net/npm/leaflet@1.6.0/dist/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.6.0/dist/leaflet.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"/>
    
            <meta name="viewport" content="width=device-width,
                initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
            <style>
                #map_4dfcfd472d321a9b127ab9d8ded0fd01 {
                    position: relative;
                    width: 100.0%;
                    height: 100.0%;
                    left: 0.0%;
                    top: 0.0%;
                }
            </style>
        
    <script src="https://cdn.jsdelivr.net/gh/ardhi/Leaflet.MousePosition/src/L.Control.MousePosition.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ardhi/Leaflet.MousePosition/src/L.Control.MousePosition.min.css"/>
    
            <style>
                #scroll_zoom_toggler_c02ad0759565f95de107bf1fdeccd6fb {
                    position:bottomleft;
                    width:35px;
                    bottom:10px;
                    height:35px;
                    left:10px;
                    background-color:#fff;
                    text-align:center;
                    line-height:35px;
                    vertical-align: middle;
                    }
            </style>
        
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-minimap/3.6.1/Control.MiniMap.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-minimap/3.6.1/Control.MiniMap.css"/>
    <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"/>
    <script src="https://cdn.jsdelivr.net/gh/ljagis/leaflet-measure@2.1.7/dist/leaflet-measure.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ljagis/leaflet-measure@2.1.7/dist/leaflet-measure.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css"/>
    <script src="https://cdn.jsdelivr.net/npm/leaflet-semicircle@2.0.4/Semicircle.min.js"></script>
</head>
<body>    
    
            <div class="folium-map" id="map_4dfcfd472d321a9b127ab9d8ded0fd01" ></div>
        
    
            <img id="scroll_zoom_toggler_c02ad0759565f95de107bf1fdeccd6fb"
                 alt="scroll"
                 src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/png/512/arrow-move.png"
                 style="z-index: 999999"
                 onclick="map_4dfcfd472d321a9b127ab9d8ded0fd01.toggleScroll()">
            </img>
        
</body>
<script>    
    
            var map_4dfcfd472d321a9b127ab9d8ded0fd01 = L.map(
                "map_4dfcfd472d321a9b127ab9d8ded0fd01",
                {
                    center: [0.0, 0.0],
                    crs: L.CRS.EPSG3857,
                    zoom: 6,
                    zoomControl: true,
                    preferCanvas: false,
                }
            );
            L.control.scale().addTo(map_4dfcfd472d321a9b127ab9d8ded0fd01);

            

        
    
            var tile_layer_f0641f93778bd0886faeb67b509fd503 = L.tileLayer(
                "https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.jpg",
                {"attribution": "Map tiles by \u003ca href=\"http://stamen.com\"\u003eStamen Design\u003c/a\u003e, under \u003ca href=\"http://creativecommons.org/licenses/by/3.0\"\u003eCC BY 3.0\u003c/a\u003e. Data by \u0026copy; \u003ca href=\"http://openstreetmap.org\"\u003eOpenStreetMap\u003c/a\u003e, under \u003ca href=\"http://creativecommons.org/licenses/by-sa/3.0\"\u003eCC BY SA\u003c/a\u003e.", "detectRetina": false, "maxNativeZoom": 18, "maxZoom": 18, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
            ).addTo(map_4dfcfd472d321a9b127ab9d8ded0fd01);
        
    
                var lat_lng_popup_c02281264de449ed3324d57de6e8f74a = L.popup();
                function latLngPop(e) {
                    lat_lng_popup_c02281264de449ed3324d57de6e8f74a
                        .setLatLng(e.latlng)
                        .setContent("Latitude: " + e.latlng.lat.toFixed(4) +
                                    "<br>Longitude: " + e.latlng.lng.toFixed(4))
                        .openOn(map_4dfcfd472d321a9b127ab9d8ded0fd01);
                    }
                map_4dfcfd472d321a9b127ab9d8ded0fd01.on('click', latLngPop);
            
    
            var mouse_position_2abe8ea48b4e8fa7b938cda888bc8d27 = new L.Control.MousePosition(
                {"emptyString": "\u5212\u52a8\u663e\u793a\u7ecf\u7eac\u5ea6", "lngFirst": false, "numDigits": 20, "position": "topright", "prefix": "\u7ecf\u7eac\u5ea6\uff1a", "separator": " | "}
            );
            mouse_position_2abe8ea48b4e8fa7b938cda888bc8d27.options["latFormatter"] =
                function(num) {return L.Util.formatNum(num, 4) + ' º ';};;
            mouse_position_2abe8ea48b4e8fa7b938cda888bc8d27.options["lngFormatter"] =
                function(num) {return L.Util.formatNum(num, 4) + ' º ';};;
            map_4dfcfd472d321a9b127ab9d8ded0fd01.addControl(mouse_position_2abe8ea48b4e8fa7b938cda888bc8d27);
        
    
            map_4dfcfd472d321a9b127ab9d8ded0fd01.scrollEnabled = true;

            map_4dfcfd472d321a9b127ab9d8ded0fd01.toggleScroll = function() {
                if (this.scrollEnabled) {
                    this.scrollEnabled = false;
                    this.scrollWheelZoom.disable();
                } else {
                    this.scrollEnabled = true;
                    this.scrollWheelZoom.enable();
                }
            };
            map_4dfcfd472d321a9b127ab9d8ded0fd01.toggleScroll();
        
    
            var tile_layer_84819afaa4dd62c70582b44b9da91f82 = L.tileLayer(
                "https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.jpg",
                {"attribution": "Map tiles by \u003ca href=\"http://stamen.com\"\u003eStamen Design\u003c/a\u003e, under \u003ca href=\"http://creativecommons.org/licenses/by/3.0\"\u003eCC BY 3.0\u003c/a\u003e. Data by \u0026copy; \u003ca href=\"http://openstreetmap.org\"\u003eOpenStreetMap\u003c/a\u003e, under \u003ca href=\"http://creativecommons.org/licenses/by-sa/3.0\"\u003eCC BY SA\u003c/a\u003e.", "detectRetina": false, "maxNativeZoom": 18, "maxZoom": 18, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
            );
            var mini_map_079a2639f8eb539c665b54472e58e49e = new L.Control.MiniMap(
                tile_layer_84819afaa4dd62c70582b44b9da91f82,
                {"autoToggleDisplay": false, "centerFixed": false, "collapsedHeight": 25, "collapsedWidth": 25, "height": 150, "minimized": false, "position": "bottomright", "toggleDisplay": true, "width": 200, "zoomAnimation": false, "zoomLevelOffset": -4}
            );
            map_4dfcfd472d321a9b127ab9d8ded0fd01.addControl(mini_map_079a2639f8eb539c665b54472e58e49e);
        
    
            L.Control.geocoder(
                {"collapsed": false, "defaultMarkGeocode": true, "position": "topright"}
            ).on('markgeocode', function(e) {
                map_4dfcfd472d321a9b127ab9d8ded0fd01.setView(e.geocode.center, 11);
            }).addTo(map_4dfcfd472d321a9b127ab9d8ded0fd01);

        
    
            var measure_control_157f505b80bb217892dd15cb50269ccb = new L.Control.Measure(
                {"position": "topright", "primaryAreaUnit": "sqmeters", "primaryLengthUnit": "meters", "secondaryAreaUnit": "acres", "secondaryLengthUnit": "miles"});
            map_4dfcfd472d321a9b127ab9d8ded0fd01.addControl(measure_control_157f505b80bb217892dd15cb50269ccb);

        
    
                var r=0
                var i=null
                var tempCircle=new L.circle()
            
                map_4dfcfd472d321a9b127ab9d8ded0fd01.on('contextmenu', onmouseDown);
                map_4dfcfd472d321a9b127ab9d8ded0fd01.on('mouseup',onmouseUp);
                map_4dfcfd472d321a9b127ab9d8ded0fd01.on('mousemove',onMove)
            
                function onmouseDown(e)
                {
                    i=e.latlng
                    //确定圆心
                }
                function onMove(e) {
                    if(i) {
                        r = L.latLng(e.latlng).distanceTo(i)
                        tempCircle.setLatLng(i)
                        tempCircle.setRadius(r)
                        tempCircle.setStyle({color:'red',fillColor:'yellow',fillOpacity:0.2})
                        map_4dfcfd472d321a9b127ab9d8ded0fd01.addLayer(tempCircle)
            
                    }
                }
            
                function onmouseUp(e)
                {
                    r = L.latLng(e.latlng).distanceTo(i)//计算半径
                    L.circle(i,{radius:r,color:'red',fillColor:'yellow',fillOpacity:0.15}).addTo(map_4dfcfd472d321a9b127ab9d8ded0fd01)
                    i=null
                    r=10000
                }
                
                
            
    
            var feature_group_3786a63b6fe089e4c0a3fa9009edcd25 = L.featureGroup(
                {}
            ).addTo(map_4dfcfd472d321a9b127ab9d8ded0fd01);
        
    
            var feature_group_0b7d3c960b72c3a7396c17c15aad363c = L.featureGroup(
                {}
            ).addTo(map_4dfcfd472d321a9b127ab9d8ded0fd01);
        
    
            var layer_control_3d082f59aa9939f2a77cddf8b113fdf3 = {
                base_layers : {
                    "stamenterrain" : tile_layer_f0641f93778bd0886faeb67b509fd503,
                },
                overlays :  {
                    "\u63a2\u6d4b\u5668" : feature_group_3786a63b6fe089e4c0a3fa9009edcd25,
                    "\u76ee\u6807" : feature_group_0b7d3c960b72c3a7396c17c15aad363c,
                },
            };
            L.control.layers(
                layer_control_3d082f59aa9939f2a77cddf8b113fdf3.base_layers,
                layer_control_3d082f59aa9939f2a77cddf8b113fdf3.overlays,
                {"autoZIndex": true, "collapsed": true, "position": "topright"}
            ).addTo(map_4dfcfd472d321a9b127ab9d8ded0fd01);
        
    
            var options = {
              position: "topleft",
              draw: {},
              edit: {},
            }
            // FeatureGroup is to store editable layers.
            var drawnItems = new L.featureGroup().addTo(
                map_4dfcfd472d321a9b127ab9d8ded0fd01
            );
            options.edit.featureGroup = drawnItems;
            var draw_control_dfa6011c629b2d9253c1b3f117eb5988 = new L.Control.Draw(
                options
            ).addTo( map_4dfcfd472d321a9b127ab9d8ded0fd01 );
            map_4dfcfd472d321a9b127ab9d8ded0fd01.on(L.Draw.Event.CREATED, function(e) {
                var layer = e.layer,
                    type = e.layerType;
                var coords = JSON.stringify(layer.toGeoJSON());
                layer.on('click', function() {
                    alert(coords);
                    console.log(coords);
                });
                drawnItems.addLayer(layer);
             });
            map_4dfcfd472d321a9b127ab9d8ded0fd01.on('draw:created', function(e) {
                drawnItems.addLayer(e.layer);
            });
            
        
    
            var semi_circle_e649e812a141ee977600b6218a196caa = L.semiCircle(
                [0.0, 0.0],
                {"bubblingMouseEvents": true, "color": "green", "dashArray": null, "dashOffset": null, "fill": true, "fillColor": "green", "fillOpacity": 0.2, "fillRule": "evenodd", "lineCap": "round", "lineJoin": "round", "opacity": 0.1, "radius": 400000, "startAngle": 50, "stopAngle": 200, "stroke": true, "weight": 3}
                )
                .addTo(map_4dfcfd472d321a9b127ab9d8ded0fd01);
        
    
        var popup_390918d32f6939bc8de35f742ab60a24 = L.popup({"maxWidth": "100%"});

        
            var html_a43f0e425c85a5469554cc3d05761b47 = $(`<div id="html_a43f0e425c85a5469554cc3d05761b47" style="width: 100.0%; height: 100.0%;">start angle - 50 degrees, stop angle - 200 degrees</div>`)[0];
            popup_390918d32f6939bc8de35f742ab60a24.setContent(html_a43f0e425c85a5469554cc3d05761b47);
        

        semi_circle_e649e812a141ee977600b6218a196caa.bindPopup(popup_390918d32f6939bc8de35f742ab60a24)
        ;

        
    
    
            semi_circle_e649e812a141ee977600b6218a196caa.bindTooltip(
                `<div>
                     覆盖区域
                 </div>`,
                {"sticky": true}
            );
        
    
            var marker_139d43b16648409e65f12f8bd368f0cb = L.marker(
                [0.0, 0.0],
                {"draggable": true}
                )
            .addTo(feature_group_3786a63b6fe089e4c0a3fa9009edcd25);
            marker_139d43b16648409e65f12f8bd368f0cb.on('dblclick', function(e){ feature_group_3786a63b6fe089e4c0a3fa9009edcd25.removeLayer(e.target)})
        
        
    
        var custom_icon_66fe657aebfbebf7cfc9a533f2223709 = L.icon({"iconAnchor": [22, 0], "iconSize": [35, 35], "iconUrl": "", "popupAnchor": [0, 0]});
        marker_139d43b16648409e65f12f8bd368f0cb.setIcon(custom_icon_66fe657aebfbebf7cfc9a533f2223709);
        
    
        var popup_bededeac214af562000ca7e57164adde = L.popup({"maxWidth": "100%"});

        
            var html_e2e0003a742ef59bc280a4705230c96c = $(`<div id="html_e2e0003a742ef59bc280a4705230c96c" style="width: 100.0%; height: 100.0%;">雷达1：地面雷达，覆盖半径200km</div>`)[0];
            popup_bededeac214af562000ca7e57164adde.setContent(html_e2e0003a742ef59bc280a4705230c96c);
        

        marker_139d43b16648409e65f12f8bd368f0cb.bindPopup(popup_bededeac214af562000ca7e57164adde)
        ;

        
    
    
            marker_139d43b16648409e65f12f8bd368f0cb.bindTooltip(
                `<div>
                     radar
                 </div>`,
                {"sticky": true}
            );
        
</script>